<template>
    <div class="shujia">
        <header>
            <div :class="index==0?'fr on' : 'fr'" @click="fzhu">{{name}}</div>
            <div :class="index==2?'fl on' : 'fl'" @click="all">全部</div>
            <div :class="index==1?'fl on' : 'fl'" @click="index=1">分组</div>
        </header>
        <nav :style="[{ width:index==1 ? '100%' :0 ,height:index==1 ? ' 26.6667vw' : 0 }]">
            <p v-for="p in zhumin" :key="p.id" :class="index==p.id?'on' : ''" @click="gozhu(p.id,p.zhumin)">{{p.zhumin}}
            </p>
        </nav>
        <main>
            <div v-for="p in dataArr" :key="p.index" class="book bgbox">
                <div class="box1" v-if="index==0 &&!isFzhu" :class="index==0?'zhezhao' : ''"></div>
                <div class="unon" v-if="index==0 &&!isFzhu" :class="index==0?'zhezhao' : ''" @click="add($event,p.id)"
                    data-tsun="0"></div>
                <div class="box1" v-if="index==0&&i==1&&GLbook"></div>
                <div class="unon" v-if="index==0&&i==1&&GLbook" @click="delbook($event,p.id)" data-tsun="0">
                </div>
                <router-link :to="{path:'/listNR', query:{caricatureId:p} }">
                    <img :src="p.url">
                    <p>{{p.name}}</p>
                    <div class="to"><span>更新到 {{p.hua}}</span></div>
                </router-link>
                <div class='buzai' v-if="index==0 && !isFzhu" @click="qdDL(p.id,$event)">取消订阅</div>
            </div>
            <router-link v-if="dataArr.length==0" class="add" exact active-class="active" to="/classify">
                <i class="bi bi-plus-square"></i>
            </router-link>
        </main>
        <footer v-if="!isFzhu" :style="[{height: index==0 ? `16vw` : 0 ,opacity: index==0 ? 1: 0}]" @click="QD">
            完成</footer>
        <div class="cover" v-if="show && index==0">
            <div>
                <p :style="[{color:!zhumingis?'red':'black'}]">{{zhuminstr}}</p>
                <input type="text" placeholder="输入分组名" v-model="str">
                <span @click="tijiao" class="tijiao">提交</span>
            </div>
        </div>
        <div class="gl-box" v-if="isFzhu">
            <div class="gl" @click="listis = !listis , listindex = '' , GLbook=false ,dlfs=false"
                :style="[{margin: listis? '0 5.3333vw 0 0' : 0,color:listis?' rgba(255, 255, 255, 1)': 'rgba(255, 255, 255, 0.55)'}]">
                管理</div>
            <div class="glList" @click="dlFZ" v-if="index==0&&i==1&&listis"
                :style="[{margin:'0 5.3333vw 0 0',color:dlfs ?'skyblue':'rgba(255, 255, 255, 0.55)'}]"><span
                    v-if="!dlfs">删除分组</span><span v-if="dlfs">取消</span>
            </div>
            <div class="qd" v-if="dlfs" @click="qdDL">确定</div>
            <div class="glListqd" v-if="GLbook" @click="qdDL">确定</div>
            <div class="glList" @click="glbook" v-if="index==0&&i==1&&listis"
                :style="[{color:GLbook ?'skyblue':'rgba(255, 255, 255, 0.55)'}]"><span v-if="GLbook">取消</span> <span
                    v-if="!GLbook">删除书籍</span> </div>
        </div>
    </div>
</template>
<script>
const axios = require('axios');
const Qs = require('qs')
export default {
    name: 'shujia',
    data() {
        return {
            SJdata: '',
            dataArr: [],
            index: 2,
            name: '编辑',
            i: 1,
            addArr: [],
            show: false,
            str: '',
            zhumin: null,
            isFzhu: false,
            listis: false,
            dlfs: false,
            GLbook: false,
            zhuID: '',
            fzlist: [],
            delbookArr: [],
            zhumingis: true,
            zhuminstr: '输入分组名:'
        }
    },
    watch: {
        str(n, o) {
            for (let i = 0; i < this.zhumin.length; i++) {
                const element = this.zhumin[i].zhumin;
                if (element == n) {
                    this.zhumingis = false
                    this.zhuminstr = '已存在这个组名请换一个'
                } else if (n == '') {
                    this.zhuminstr = '输入分组名:'
                } else {
                    this.zhumingis = true
                    this.zhuminstr = '是个好名字呢'
                }
            }
        }
    },
    methods: {
        getSJdata() {
            axios({
                method: 'post',
                headers: { 'Content-Type': 'multipart/form-data' },
                url: 'http://127.0.0.1/user/shujia',
            }).then((data) => {
                this.SJdata = data.data
            }).then(() => {
                for (let i = 0; i < this.SJdata.length; i++) {
                    const element = this.SJdata[i];
                    this.getMhua(element.bookid)
                }
            }).catch((err) => {
                console.log(err);
            })
        },
        getMhua(id) {
            let data = {
                caricatureId: id
            }
            axios({
                method: 'post',
                url: 'http://127.0.0.1/nr/allM',
                data: Qs.stringify(data)
            }).then((data) => {
                let obj = { name: data.data[0].name, url: data.data[0].url, hua: data.data[0].hua, id: id, index: data.data[0].id }
                this.dataArr.push(obj)
            }).catch((err) => {
                console.log(err);
            })
        },
        fzhu() {
            if (!this.isFzhu) {
                this.name = '添加分组'
                this.i = 2
                if (this.i > 2) {
                    this.index = 2
                    this.i = 1
                    this.name = '编辑'
                    return
                }
                this.index = 0
            }
        },
        add(e, id) {
            if (this.isFzhu) return
            let el = e.target
            let tsun = el.parentNode.querySelector('.unon').getAttribute('data-tsun')
            if (tsun == 0) {
                el.parentNode.querySelector('.unon').className = 'unon on'
                tsun++
                el.parentNode.querySelector('.unon').setAttribute('data-tsun', tsun)
                this.addArr.push(id)
            } else {
                el.parentNode.querySelector('.unon').className = 'unon'
                tsun = 0
                el.parentNode.querySelector('.unon').setAttribute('data-tsun', tsun)
                var index = this.addArr.indexOf(id)
                this.addArr.splice(index, 1)
            }
        },
        tijiao() {
            let str = ''
            for (let i = 0; i < this.addArr.length; i++) {
                const element = this.addArr[i];
                str += element + '-'
            }
            str = str.substring(0, str.length - 1)
            if (this.str != '' && this.zhumingis) {
                let data = {
                    zhumin: this.str,
                    bookid: str
                }
                axios({
                    method: 'post',
                    url: 'http://127.0.0.1/user/fenzu',
                    data: Qs.stringify(data)
                }).then(() => {
                    location.reload();
                }).catch((err) => {
                    console.log(err);
                })
            } else {
                this.zhuminstr = '不能为空'
            }
        },
        getzhu() {
            axios({
                method: 'post',
                url: 'http://127.0.0.1/user/fenzu'
            }).then((data) => {
                this.zhumin = data.data
            }).catch((err) => {
                console.log(err);
            })
        },
        gozhu(id, zhumin) {
            let data = {
                cha: 'cha',
                zhumin: zhumin
            }
            axios({
                method: 'post',
                url: 'http://127.0.0.1/user/fenzu',
                data: Qs.stringify(data)
            }).then((data) => {
                let arr = data.data[0].bookid;
                this.zhuID = data.data[0].id
                arr = arr.split('-')
                this.fzlist = []
                for (let i = 0; i < arr.length; i++) {
                    const element = arr[i];
                    this.dataArr = []
                    this.getMhua(element)
                    this.fzlist.push(element)
                }

            }).then(() => {
                this.index = 0
                this.name = zhumin
            }).then(() => {
                this.isFzhu = true
            })
                .catch((err) => {
                    console.log(err);
                })
        },
        all() {
            this.index = 2
            this.isFzhu = false
            this.name = '编辑'
            this.dataArr = [];
            this.getSJdata()
        },
        dlFZ() {
            this.GLbook = false
            this.dlfs = !this.dlfs

        },
        glbook() {
            this.GLbook = !this.GLbook
            this.dlfs = false
        },
        qdDL(bookid, e) {
            if (this.GLbook) {
                let str = ''
                let arr = []
                if (this.delbookArr.length == 0) {
                    arr = this.fzlist
                } else {
                    let index = 0
                    for (let i = 0; i < this.fzlist.length; i++) {
                        if (this.delbookArr.indexOf(this.fzlist[i]) == -1) {
                            arr.push(this.fzlist[i])
                            index++
                        }
                    }
                    if (index == 0) {
                        let data = {
                            del: 'del',
                            id: this.zhuID,
                        }
                        axios({
                            method: 'post',
                            url: 'http://127.0.0.1/user/fenzu',
                            data: Qs.stringify(data)
                        }).then((data) => {
                            location.reload();
                        })
                    }
                }
                for (let i = 0; i < arr.length; i++) {
                    const element = arr[i];
                    str += element + '-'
                }
                str = str.slice(0, str.length - 1)
                let data = {
                    fengdelbook: 'del',
                    id: this.zhuID,
                    bookid: str
                }
                axios({
                    method: 'post',
                    url: 'http://127.0.0.1/user/fenzu',
                    data: Qs.stringify(data)
                }).then((data) => {
                    location.reload();
                })
            } else if (this.isFzhu && this.index == 0) {
                let data = {
                    del: 'del',
                    id: this.zhuID
                }
                axios({
                    method: 'post',
                    url: 'http://127.0.0.1/user/fenzu',
                    data: Qs.stringify(data)
                }).then(() => {
                    location.reload();
                })
            }
            else {
                let data = {
                    del: 'del',
                    bookid: bookid
                }
                axios({
                    method: 'post',
                    url: 'http://127.0.0.1/user/shujia',
                    data: Qs.stringify(data)
                }).then((data) => {
                    let el = e.target
                    el.parentNode.style.display = "none"
                })
            }
        },
        delbook(e, id) {
            let el = e.target
            let tsun = el.getAttribute('data-tsun')
            if (tsun == 0) {
                tsun++
                el.setAttribute('data-tsun', tsun)
                el.className = 'delon unon'
                this.delbookArr.push(id)
            } else {
                tsun = 0
                el.setAttribute('data-tsun', tsun)
                el.className = 'unon'
                var index = this.delbookArr.indexOf(id)
                this.delbookArr.splice(index, 1)
            }
        },
        QD() {
            if (this.addArr.length == 0) {
                location.reload();
            } else {
                this.show = true
            }
        }
    },
    mounted() {
        this.getSJdata()
        this.getzhu()
    }
}
</script>

<style lang="less" scoped>
#app,
.shujia {
    position: relative;
    width: 100%;
    height: 91.2%;
}

.shujia {
    position: relative;
    caret-color: transparent;
    width: 100%;

    .gl-box {
        display: flex;
        position: fixed;
        padding: 0 2.6667vw;
        bottom: 26.6667vw;
        right: 1.0667vw;
        height: 10vw;
        line-height: 10vw;
        background-color: rgba(0, 0, 0, 0.6);
        text-align: center;
        color: rgba(255, 255, 255, 0.55);
        border-radius: 13.3333vw;

        .qd {
            position: absolute;
            top: -10.1333vw;
            right: 19.4667vw;
            width: 17vw;
            height: 10.1333vw;
            border-top-left-radius: 2.7333vw;
            border-top-right-radius: 5.3333vw;
            background-color: skyblue;
            color: white;
        }

        .glListqd {
            position: absolute;
            top: -10.1333vw;
            right: 4.1667vw;
            width: 17vw;
            height: 10.1333vw;
            border-top-right-radius: 2.7333vw;
            border-top-left-radius: 5.3333vw;
            background-color: skyblue;
            color: white;
        }
    }

    header {
        display: flex;
        justify-content: space-between;
        margin: 0 5.3333vw;
        margin-top: 2.6667vw;
        border-radius: 5.3333vw;

        div {
            padding: 1.3333vw 3.333333vw;
            border-radius: 5.3333vw;
            border: .5333vw skyblue solid;
            transition: all .5s;
            width: 8.5333vw;
            height: 5.5333vw;
            min-width: 8.5333vw;
            text-align: center;
            line-height: 5.5333vw;
            font-size: 3.4667vw;
            font-weight: 600;
            color: skyblue;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }


        .fr {
            text-align: right;
        }

        .on {
            display: block;
            width: 70%;
            background-color: skyblue;
            color: aliceblue;
        }

    }

    .buzai {
        position: absolute;
        bottom: 0;
        left: -0.5333vw;
        width: 22.5333vw;
        height: 5.5333vw;
        border-radius: 1.3333vw;
        padding: 1.3333vw 3.333333vw;
        text-align: center;
        line-height: 5.5333vw;
        font-size: 3.4667vw;
        font-weight: 600;
        color: white;
        background-color: red;
    }

    nav {
        width: 100%;
        height: 26.6667vw;
        background-image: linear-gradient(hsl(0, 0%, 4%), hsla(0, 0%, 4%, 0.767), rgba(246, 248, 248, 0.308));
        z-index: 999999;
        display: flex;
        padding-top: 15.6667vw;
        transition: height .5s;
        overflow-x: auto;
        margin-top: -12.3333vw;

        p {
            flex-shrink: 0;
            display: block;
            width: 9.3333vw;
            margin: 0;
            opacity: 0.8;
            font-size: 4.2667vw;
            opacity: 0.8;
            padding: 2.6667vw 0;
            color: aliceblue;
            text-align: center;
            line-height: 9.3333vw;
            margin-left: 1.3333vw;
            writing-mode: vertical-lr;
            word-wrap: break-word;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }

    main {
        padding: 0 2.6667vw;
        margin-top: -2.6667vw;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;

        .bgbox {
            position: relative;
            top: 5.3333vw;

            a {
                display: block;
                width: 28.1667vw;
                height: 48vw;
                overflow: hidden;
                z-index: 9999;

                img {
                    height: 79%;
                    width: 100%;
                }

                p {
                    margin: 0;
                    padding: 0;
                    color: black;
                    font-size: 3.4667vw;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
            }

            .on {
                height: 39vw !important;
                background-color: rgba(0, 0, 0, 0.6);
            }

            .delon {
                height: 39vw !important;
                background-color: rgba(0, 0, 0, 0.6);
                background: url(../assets/public/删除.png) no-repeat, color(rgba(0, 0, 0, 0.6));
                background-size: 25vw 25vw;
                background-position: 2.1vw 5.6vw;
            }

            .unon {
                position: absolute;
                top: 50%;
                left: 50%;
                margin-left: -14.7022vw;
                margin-top: -25.1vw;
                width: 29.2667vw;
                height: 38vw;
                z-index: 99999;
                text-align: center;
                line-height: 38vw;
            }

            .to {
                span {
                    font-size: 3.2vw;
                    color: black;
                }
            }

        }

        .add {
            width: 28.1667vw;
            height: 28.1667vw;
            margin-top: 26.6667vw;

            .bi-plus-square {
                display: block;
                line-height: 28.1667vw;
                text-align: center;
                font-size: 26.6667vw;
                font-weight: 400;
                color: skyblue;
            }
        }
    }

    footer {
        z-index: 99999999;
        background-color: skyblue;
        position: fixed;
        bottom: 0;
        width: 100%;
        font-size: 8vw;
        color: white;
        font-weight: 600;
        line-height: 16vw;
        text-align: center;
        border-top-right-radius: 5.3333vw;
        border-top-left-radius: 5.3333vw;
        transition: all 1s;
    }

    .cover {
        position: absolute;
        top: -2.4vw;
        width: 100%;
        height: 101.8%;
        background-color: rgba(0, 0, 0, 0.6);

        div {
            display: flex;
            flex-wrap: wrap;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -42.3333vw;
            margin-left: -34.41665vw;
            width: 68.8333vw;
            height: 40vw;
            background-color: gray;
            border-radius: 5.3333vw;
            z-index: 999999;

            p {

                margin: 0;
                width: 100%;
                height: 10.6667vw;
                text-align: center;
                line-height: 10.6667vw;
            }

            input {
                display: block;
                width: 80%;
                margin: 0 auto;
                margin-top: -4.6333vw;
                border: none;
                outline: none;
                padding: 0 2.6667vw;
                font-size: 3.7333vw;
                border-radius: 5.3333vw;
            }

            .tijiao {
                display: block;
                width: 17.5667vw;
                height: 17.5667vw;
                background-color: skyblue;
                color: white;
                text-align: center;
                line-height: 17.5667vw;
                margin: 0 auto;
                margin-top: 2.6667vw;
                border-radius: 50%;
            }
        }
    }
}
</style>